<template>
  <div class="svg-loading" :style="animationStyle">
    <!-- 圆形旋转动画 -->
    <svg v-if="type === 'circle'" class="loading-circle" viewBox="0 0 50 50">
      <circle class="path" cx="25" cy="25" r="20" fill="none"></circle>
    </svg>

    <!-- 点阵动画 -->
    <div v-else-if="type === 'dots'" class="loading-dots">
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
    </div>

    <!-- 波浪动画 -->
    <div v-else-if="type === 'wave'" class="loading-wave">
      <div class="wave"></div>
      <div class="wave"></div>
      <div class="wave"></div>
      <div class="wave"></div>
      <div class="wave"></div>
    </div>

    <!-- 旋转器动画 -->
    <div v-else-if="type === 'spinner'" class="loading-spinner">
      <div class="spinner-blade"></div>
      <div class="spinner-blade"></div>
      <div class="spinner-blade"></div>
      <div class="spinner-blade"></div>
      <div class="spinner-blade"></div>
      <div class="spinner-blade"></div>
      <div class="spinner-blade"></div>
      <div class="spinner-blade"></div>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  type: {
    type: String,
    default: "circle",
    validator: (value) => ["circle", "dots", "wave", "spinner"].includes(value),
  },
  color: {
    type: String,
    default: "#3498db",
  },
  size: {
    type: Number,
    default: 50,
  },
  strokeWidth: {
    type: Number,
    default: 4,
  },
  speed: {
    type: Number,
    default: 1.5,
  },
});

const animationStyle = computed(() => {
  return {
    "--loading-color": props.color,
    "--loading-size": `${props.size}px`,
    "--stroke-width": `${props.strokeWidth}px`,
    "--animation-speed": `${props.speed}s`,
  };
});
</script>
<style scoped>
body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
  color: #fff;
  min-height: 100vh;
  margin: 0;
}
</style>
<style scoped>
.svg-loading {
  display: inline-block;
  width: var(--loading-size);
  height: var(--loading-size);
}

/* 圆形旋转动画样式 */
.loading-circle {
  width: 100%;
  height: 100%;
  animation: rotate var(--animation-speed) linear infinite;
}

.loading-circle .path {
  stroke: var(--loading-color);
  stroke-width: var(--stroke-width);
  stroke-linecap: round;
  animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}

/* 点阵动画样式 */
.loading-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: calc(var(--loading-size) * 0.15);
}

.loading-dots .dot {
  width: calc(var(--loading-size) * 0.2);
  height: calc(var(--loading-size) * 0.2);
  border-radius: 50%;
  background-color: var(--loading-color);
  animation: dots-bounce var(--animation-speed) infinite ease-in-out;
}

.loading-dots .dot:nth-child(1) {
  animation-delay: calc(var(--animation-speed) * -0.32);
}

.loading-dots .dot:nth-child(2) {
  animation-delay: calc(var(--animation-speed) * -0.16);
}

@keyframes dots-bounce {
  0%,
  80%,
  100% {
    transform: scale(0.4);
  }
  40% {
    transform: scale(1);
  }
}

/* 波浪动画样式 */
.loading-wave {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: calc(var(--loading-size) * 0.08);
}

.loading-wave .wave {
  width: calc(var(--loading-size) * 0.1);
  height: 70%;
  background: var(--loading-color);
  border-radius: 20px;
  animation: wave-stretch var(--animation-speed) infinite ease-in-out;
}

.loading-wave .wave:nth-child(1) {
  animation-delay: calc(var(--animation-speed) * -0.6);
}

.loading-wave .wave:nth-child(2) {
  animation-delay: calc(var(--animation-speed) * -0.5);
}

.loading-wave .wave:nth-child(3) {
  animation-delay: calc(var(--animation-speed) * -0.4);
}

.loading-wave .wave:nth-child(4) {
  animation-delay: calc(var(--animation-speed) * -0.3);
}

.loading-wave .wave:nth-child(5) {
  animation-delay: calc(var(--animation-speed) * -0.2);
}

@keyframes wave-stretch {
  0%,
  40%,
  100% {
    transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1);
  }
}

/* 旋转器动画样式 */
.loading-spinner {
  position: relative;
  width: 100%;
  height: 100%;
  animation: spinner-rotate var(--animation-speed) infinite linear;
}

.spinner-blade {
  position: absolute;
  left: 44.5%;
  top: 37%;
  width: calc(var(--loading-size) * 0.1);
  height: calc(var(--loading-size) * 0.25);
  border-radius: 50%/20%;
  background-color: var(--loading-color);
  transform-origin: center calc(var(--loading-size) * 0.5);
  opacity: 0.8;
}

.spinner-blade:nth-child(1) {
  transform: rotate(0deg);
}
.spinner-blade:nth-child(2) {
  transform: rotate(45deg);
}
.spinner-blade:nth-child(3) {
  transform: rotate(90deg);
}
.spinner-blade:nth-child(4) {
  transform: rotate(135deg);
}
.spinner-blade:nth-child(5) {
  transform: rotate(180deg);
}
.spinner-blade:nth-child(6) {
  transform: rotate(225deg);
}
.spinner-blade:nth-child(7) {
  transform: rotate(270deg);
}
.spinner-blade:nth-child(8) {
  transform: rotate(315deg);
}

@keyframes spinner-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
